<template>
    <div class="condition-monitoring">
        <search-condition @resert="resert" @search="search" :isShowMoreSeach="false"> </search-condition>
        <div class="construction" :style="{ height: height + 'px' }">
            <div class="girder">
                <div class="girderHeaderLeft">
                    <div class="girderConditional">
                        <div class="girderHeader">
                            <text class="title">主梁</text>
                            <div class="sensor">
                                <text>传感器状态</text>
                                <span><i style="margin: 0 20px" class="iconfont icon-qishengjigou-zhengchang"></i><text style="margin-left: -15px">正常</text></span>
                                <span style="margin-left: 20px; color: #ff4d4f"><i class="iconfont icon-qishengjigou-yichang"></i><text style="margin-left: 5px">异常</text></span>
                            </div>
                            <div class="condition">
                                <el-date-picker v-model="certainTime" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" @change="change" placeholder="请选择时间" />
                                <el-select v-model="timeSelect" @change="timeChange" clearable placeholder="请选择时间段">
                                    <el-option v-for="item in timeData" :key="item.id" :label="item.name" :value="item.value" />
                                </el-select>
                            </div>
                        </div>
                        <div class="describe">
                            <div class="describeTitle">
                                <el-checkbox-group v-model="checkList1" @change="describeChange">
                                    <el-checkbox v-for="item in girderListData" :label="item.value">
                                        <i
                                            class="iconfont icon-qishengjigou-zhengchang"
                                            :class="{ wrong: !girderWrongData.filter((items) => items.positionValue === item.value).every((items) => items.state) || girderWrongData.length == 0 }"
                                            style="margin-right: 5px"
                                        ></i>
                                        <div :class="{ wrong: !girderWrongData.filter((items) => items.positionValue === item.value).every((items) => items.state) || girderWrongData.length == 0 }">
                                            {{ item.name }}
                                        </div>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                    <div class="lesseeTable" v-loading="loading" element-loading-background="#163C54">
                        <table>
                            <thead>
                                <tr>
                                    <th>描述对象</th>
                                    <th>趋势平稳度</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in girderTableData">
                                    <td>{{ item.evaluateObject }}</td>
                                    <td
                                        :class="[
                                            {
                                                unStandard: item.statusValue >= 0 && item.statusValue <= 33,
                                                standard: item.statusValue > 33 && item.statusValue <= 66,
                                                excellent: item.statusValue > 66
                                            }
                                        ]"
                                    >
                                        {{ item.statusValue }}%
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="aggregate">
                    <div v-show="checkList1 == ''" class="noGirderData">
                        <text>未选择数据</text>
                    </div>
                    <div v-show="checkList1 != ''" ref="lesseeTypeRef" class="lesseeTimely"></div>
                </div>
            </div>
            <div class="majorStructure">
                <div style="display: flex; justify-content: space-between">
                    <text class="title">主结构</text>
                    <div class="structureTitle">
                        <el-checkbox-group v-model="checkList2" @change="structureChange">
                            <el-checkbox v-for="item in structureListData" :label="item.value">
                                <i
                                    class="iconfont icon-qishengjigou-zhengchang"
                                    :class="{ wrong: !structureWrongData.filter((items) => items.positionValue === item.value).every((items) => items.state) }"
                                    style="margin-right: 5px"
                                ></i>
                                <div :class="{ wrong: !structureWrongData.filter((items) => items.positionValue === item.value).every((items) => items.state) }">{{ item.name }}</div>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="mainStructure">
                    <div v-loading="loading" element-loading-background="#163C54">
                        <table>
                            <thead>
                                <tr>
                                    <th>描述对象</th>
                                    <th>趋势平稳度</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in structureTableData">
                                    <td>{{ item.evaluateObject }}</td>
                                    <td
                                        :class="[
                                            {
                                                unStandard: item.statusValue >= 0 && item.statusValue <= 33,
                                                standard: item.statusValue > 33 && item.statusValue <= 66,
                                                excellent: item.statusValue > 66
                                            }
                                        ]"
                                    >
                                        {{ item.statusValue }}%
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div v-show="checkList2 == ''" class="noStructureData">
                    <text>未选择数据</text>
                </div>
                <div v-show="checkList2 != ''" ref="estimateTypeRef" class="estimateTimely"></div>
            </div>
        </div>
        <div class="liftingStructure">
            <text class="title">起升结构</text>
            <div class="structured">
                <div v-for="item in liftingData" :key="item.index">
                    <div class="heading">
                        <i class="iconfont icon-qishengjigou-zhengchang" :class="{ wrong: item.state === false || liftingData.length === 0 }"></i>
                        <span style="margin: 0 0 2px 5px" :class="{ wrong: item.state === false || liftingData.length === 0 }">{{ item.trendStabilityTypeName }}</span>
                    </div>
                    <div class="structuredCondition">
                        <div class="arrange">
                            <div class="arrangeBack">
                                <text>机构振动情况</text>
                                <text
                                    class="degree"
                                    :class="[
                                        {
                                            unStandard: (item.institutionalVibration >= 0 && item.institutionalVibration <= 33) || item.institutionalVibration == '较差',
                                            standard: (item.institutionalVibration > 33 && item.institutionalVibration <= 66) || item.institutionalVibration == '一般',
                                            excellent: item.institutionalVibration > 66 || item.institutionalVibration == '良好'
                                        }
                                    ]"
                                    >{{ item.institutionalVibration }}</text
                                >
                            </div>
                            <div class="arrangeBack">
                                <text>主要振动源</text>
                                <text
                                    class="degree"
                                    :class="[
                                        {
                                            unStandard: (item.vibrationSource >= 0 && item.vibrationSource <= 33) || item.vibrationSource == '较差',
                                            standard: (item.vibrationSource > 33 && item.vibrationSource <= 66) || item.vibrationSource == '一般',
                                            excellent: item.vibrationSource > 66 || item.vibrationSource == '良好'
                                        }
                                    ]"
                                    >{{ item.vibrationSource }}</text
                                >
                            </div>
                            <div class="arrangeBack">
                                <text>卷筒健康度</text>
                                <text
                                    class="degree"
                                    :class="[
                                        {
                                            unStandard: (item.reelHealth >= 0 && item.reelHealth <= 33) || item.reelHealth == '较差',
                                            standard: (item.reelHealth > 33 && item.reelHealth <= 66) || item.reelHealth == '一般',
                                            excellent: item.reelHealth > 66 || item.reelHealth == '良好'
                                        }
                                    ]"
                                    >{{ item.reelHealth }}<label v-if="item.reelHealth">%</label></text
                                >
                            </div>
                            <div class="arrangeBack">
                                <text>轴承健康度</text>
                                <text
                                    class="degree"
                                    :class="[
                                        {
                                            unStandard: (item.bearingHealth >= 0 && item.bearingHealth <= 33) || item.bearingHealth == '较差',
                                            standard: (item.bearingHealth > 33 && item.bearingHealth <= 66) || item.bearingHealth == '一般',
                                            excellent: item.bearingHealth > 66 || item.bearingHealth == '良好'
                                        }
                                    ]"
                                    >{{ item.bearingHealth }}<label v-if="item.bearingHealth">%</label></text
                                >
                            </div>
                        </div>
                        <div class="table-main" v-loading="loading" element-loading-background="#163C54">
                            <table>
                                <thead>
                                    <tr>
                                        <th>描述对象</th>
                                        <th>趋势平稳度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="items in item.smoothnessRequests">
                                        <td>{{ items.evaluateObject }}</td>
                                        <td
                                            :class="[
                                                {
                                                    unStandard: items.statusValue >= 0 && items.statusValue <= 33,
                                                    standard: items.statusValue > 33 && items.statusValue <= 66,
                                                    excellent: items.statusValue > 66
                                                }
                                            ]"
                                        >
                                            {{ items.statusValue }}%
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, provide, watch, nextTick, onUnmounted, onMounted } from "vue";
import searchCondition from "@/components/searchCondition.vue";
import echarts from "@/echarts";
import { getGirder, getPlace, getLifting, getGirderList, getStructureList, getMainStructure, getTimeList } from "@/service/api/conditionMonitoring.js";
import { getbasicsequipmentcodelist } from "@/service/api/healthAssessment.js";
import { getequipmentarealocationlist } from "@/service/api/equipmentManagement.js";
import { getbasicsequipmentnamelist } from "@/service/api/faultDetection.js";
import { formConfig, lesseeTypeOpiton, estimateTypeOpiton } from "./config";
import dayjs from "dayjs";

const toDay = ref(new Date());
const toDayCharacter =
    toDay.value.getFullYear() +
    "-" +
    (toDay.value.getMonth() + 1 < 10 ? "0" + (toDay.value.getMonth() + 1) : toDay.value.getMonth() + 1) +
    "-" +
    (toDay.value.getDate() < 10 ? "0" + toDay.value.getDate() : toDay.value.getDate());
const formData = reactive({ location: "", equipmentCode: "" });
const formDataCopy = ref();
const loading = ref(false);
const lesseeTypeRef = ref(null);
const estimateTypeRef = ref(null);
const certainTime = ref(toDayCharacter);
const girderListData = ref();
const structureListData = ref();
const liftingData = ref();
const girderTableData = ref();
const structureTableData = ref();
const liftingFormData = reactive({
    equipmentCode: "",
    viewDate: dayjs().format("YYYY-MM-DD HH:mm:ss")
});
const girderFormData = reactive({
    equipmentCode: "",
    ts: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    position: [],
    timeInterval: ""
});
const structureFormData = reactive({
    equipmentCode: "",
    ts: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    position: [],
    timeInterval: ""
});
const locationFormData = reactive({
    equipmentCode: "",
    positionType: ""
});
const checkList1 = ref();
const checkList2 = ref();
const girderWrongData = ref([]);
const structureWrongData = ref([]);
const timeSelect = ref();
const timeData = ref();

const timer = setInterval(() => {
    girderFormData.ts = certainTime.value + " " + dayjs().format("YYYY-MM-DD HH:mm:ss").slice(-8);
    structureFormData.ts = certainTime.value + " " + dayjs().format("YYYY-MM-DD HH:mm:ss").slice(-8);
    if (checkList1.value != "" && certainTime.value != null) {
        if (timeSelect.value == undefined || timeSelect.value == "") {
            girder();
        }
    }
    if (checkList2.value != "" && certainTime.value != null) {
        if (timeSelect.value == undefined || timeSelect.value == "") {
            structure();
        }
    }
}, 5000);
// 设备
onUnmounted(() => {
    clearInterval(timer);
});
const height = ref();

onMounted(() => {
    echarts.init(lesseeTypeRef.value);
    echarts.init(estimateTypeRef.value);
    getTimeList().then((res) => {
        if (res.code === 200) {
            timeData.value = res.data;
        }
    });
});

watch(
    () => formData.location,
    (news) => {
        formData.equipmentCode = "";
        getbasicsequipmentcodelist({ area: news }).then((res) => {
            if (res.code === 200) {
                formConfig.value[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
        getbasicsequipmentnamelist({ area: news }).then((res) => {
            if (res.code === 200) {
                formConfig.value[2].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    }
);
getequipmentarealocationlist().then((res) => {
    if (res.code === 200) {
        formConfig.value[0].options = res.data.map((item) => ({ label: item.name, value: item.value }));
        formData.location = formConfig.value[0].options[0].value;
        getbasicsequipmentcodelist({ area: formData.location }).then((res) => {
            if (res.code === 200) {
                formConfig.value[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
                formData.equipmentCode = formConfig.value[1].options[0]?.value;
                formDataCopy.value = formConfig.value[1].options[0]?.value;
                getGirderPlace();
                getStructurePlace();
                girder();
                structure();
                spectrogram();
            }
        });
        getbasicsequipmentnamelist({ area: formData.location }).then((res) => {
            if (res.code === 200) {
                formConfig.value[2].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    }
});

//主梁位置
function getGirderPlace() {
    locationFormData.equipmentCode = formData.equipmentCode;
    locationFormData.positionType = 1;
    getPlace(locationFormData).then((res) => {
        if (res.code === 200) {
            girderListData.value = res.data;
            checkList1.value = girderListData.value.map((item) => item.value);
        }
    });
}

//主结构位置
function getStructurePlace() {
    locationFormData.equipmentCode = formData.equipmentCode;
    locationFormData.positionType = 2;
    getPlace(locationFormData).then((res) => {
        if (res.code === 200) {
            structureListData.value = res.data;
            checkList2.value = structureListData.value.map((item) => item.value);
        }
    });
}

//主梁频谱图
function girder() {
    if (formData.equipmentCode) {
        girderFormData.equipmentCode = formDataCopy.value;
    }
    getGirder(girderFormData).then((res) => {
        if (res.code === 200) {
            if (res.data.length != 0) {
                lesseeTypeOpiton.xAxis.data = res.data[0].dateTimeName;
                lesseeTypeOpiton.legend.data = res.data.map((item) => item.sensorName);
                lesseeTypeOpiton.series = res.data.map((item) => ({
                    name: item.sensorName,
                    data: item.numericValue,
                    type: "line",
                    color: item.dataColor,
                    smooth: true,
                    symbol: "none"
                }));
                girderWrongData.value = [];
                for (let index = 0; index < res.data.length; index++) {
                    girderWrongData.value.push({
                        positionValue: res.data[index].positionValue,
                        state: res.data[index].state
                    });
                }
                nextTick(() => {
                    if (checkList1.value.length != 0) {
                        echarts.getInstanceByDom(lesseeTypeRef.value).setOption(lesseeTypeOpiton);
                    }
                });
            } else {
                echarts.getInstanceByDom(lesseeTypeRef.value).clear();
            }
        }
    });
}

//主结构频谱图
function structure() {
    if (formData.equipmentCode) {
        structureFormData.equipmentCode = formData.equipmentCode;
    }
    getMainStructure(structureFormData).then((res) => {
        if (res.code === 200) {
            if (res.data.length != 0) {
                estimateTypeOpiton.xAxis.data = res.data[0].dateTimeName;
                estimateTypeOpiton.legend.data = res.data.map((item) => item.sensorName);
                estimateTypeOpiton.series = res.data.map((item) => ({
                    name: item.sensorName,
                    data: item.numericValue,
                    type: "line",
                    color: item.dataColor,
                    smooth: true,
                    symbol: "none"
                }));
                structureWrongData.value = [];
                for (let index = 0; index < res.data.length; index++) {
                    structureWrongData.value.push({
                        positionValue: res.data[index].positionValue,
                        state: res.data[index].state
                    });
                }
                nextTick(() => {
                    if (checkList2.value != "") {
                        echarts.getInstanceByDom(estimateTypeRef.value).setOption(estimateTypeOpiton);
                    }
                    if (checkList2.value.length != 0) {
                        echarts.getInstanceByDom(estimateTypeRef.value).setOption(estimateTypeOpiton);
                    }
                });
            } else {
                echarts.getInstanceByDom(estimateTypeRef.value).clear();
            }
        }
    });
}

function spectrogram() {
    if (formData.equipmentCode) {
        liftingFormData.equipmentCode = formData.equipmentCode;
    }
    getLifting(liftingFormData).then((res) => {
        if (res.code === 200) {
            liftingData.value = res.data;
        }
    });

    getGirderList(liftingFormData).then((res) => {
        loading.value = false;
        if (res.code === 200) {
            girderTableData.value = res.data;
        }
    });
    getStructureList(liftingFormData).then((res) => {
        loading.value = false;
        if (res.code === 200) {
            structureTableData.value = res.data;
        }
    });
}

//切换查询
const change = (val) => {
    if (val != null && val != "" && val != undefined) {
        const hMS = ref(dayjs().format("YYYY-MM-DD HH:mm:ss").slice(-8));
        liftingFormData.viewDate = val + " " + hMS.value;
        girderFormData.ts = val + " " + hMS.value;
        structureFormData.ts = val + " " + hMS.value;
        getGirderPlace();
        getStructurePlace();
        spectrogram();
        girder();
        structure();
    }
};
const timeChange = () => {
    girderFormData.timeInterval = timeSelect.value;
    structureFormData.timeInterval = timeSelect.value;
    girder();
    structure();
};

const describeChange = (val) => {
    girderFormData.position = val;
    if (checkList1.value != "") {
        echarts.dispose(lesseeTypeRef.value);
        echarts.init(lesseeTypeRef.value);
    }
    girder();
};
const structureChange = (val) => {
    structureFormData.position = val;
    if (checkList2.value != "") {
        echarts.dispose(estimateTypeRef.value);
        echarts.init(estimateTypeRef.value);
    }
    structure();
};

const search = () => {
    if (formData.equipmentCode == "") {
        ElMessage({
            message: "请选择设备再进行查询",
            type: "warning"
        });
    } else {
        formDataCopy.value = formData.equipmentCode;
        getGirderPlace();
        getStructurePlace();
        girderFormData.position = [];
        structureFormData.position = [];
        spectrogram();
        girder();
        structure();
    }
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};

provide("formData", formData);
provide("formConfig", formConfig);
provide("layout", { xs: 6, sm: 6, md: 6, lg: 6, xl: 6 });
</script>

<style lang="less" scoped>
.condition-monitoring {
    height: 100%;
    .unStandard {
        color: red;
    }
    .standard {
        color: #ffc53f;
    }
    .excellent {
        color: #a0d911;
    }
    .construction {
        margin-top: 16px;
        height: calc(100% - 92px - 275px - 16px);
        display: flex;
        justify-content: space-between;
        .wrong {
            color: #ff4d4f;
        }
        .girder {
            width: calc(68% - 8px);
            background-color: #0e2b3d;
            height: 100%;
            .girderHeaderLeft {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .girderConditional {
                    color: #c5d8ff;
                    font-size: 14px;
                    .girderHeader {
                        display: flex;
                        .sensor {
                            margin: 16px 0 0 48px;
                        }
                        .condition {
                            margin-top: 10px;
                            :deep(.el-input__wrapper) {
                                background-color: #0e2b3d;
                                box-shadow: 0 0 0 1px #4ba6dd;
                                margin-left: 30px;
                            }
                        }
                    }
                }
            }
            .lesseeTable {
                box-sizing: border-box;
                width: 200px;
                text-align: center;
                color: #c5d8ff;
                font-size: 14px;
                overflow-y: scroll;
                height: 64px;
                table {
                    width: 100%;
                    border-collapse: collapse;
                    thead {
                        position: sticky;
                        top: 0;
                        z-index: 2;
                        background: #163c54;
                    }
                    th,
                    tr {
                        height: 32px;
                        padding: 0;
                    }
                    tbody {
                        tr {
                            &:nth-of-type(even) {
                                background: #163c54;
                            }
                        }
                    }
                }
            }
            .describe {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                margin: 0 5px;
                .describeTitle {
                    font-weight: 400;
                    line-height: 20px;
                    display: contents;
                    .iconfont {
                        font-size: 14px;
                    }

                    :deep(.el-checkbox-group) {
                        display: contents;
                    }
                    :deep(.el-checkbox__inner) {
                        background-color: #0e2b3d;
                    }
                    :deep(.el-checkbox__label) {
                        color: #c5d8ff;
                    }
                    :deep(.el-checkbox) {
                        display: flex;
                        flex-direction: row-reverse;
                    }
                    :deep(.el-checkbox__label) {
                        display: flex;
                        padding: 0 10px;
                    }
                }
            }
            .aggregate {
                width: 100%;
                height: calc(100% - 95px);
                display: flex;
                justify-content: space-evenly;
                .noGirderData {
                    background-color: #0e2b3d;
                    width: 85%;
                    color: #c5d8ff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .lesseeTimely {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .majorStructure {
            width: calc(32% - 8px);
            height: 100%;
            background-color: #0e2b3d;
            .structureTitle {
                font-weight: 400;
                line-height: 20px;
                margin: 14px 17px 0 0;
                display: flex;
                .iconfont {
                    font-size: 14px;
                    margin-right: 20px;
                }
                :deep(.el-checkbox-group) {
                    display: contents;
                }
                :deep(.el-checkbox__inner) {
                    background-color: #0e2b3d;
                }
                :deep(.el-checkbox__label) {
                    color: #c5d8ff;
                }
                :deep(.el-checkbox) {
                    display: flex;
                    flex-direction: row-reverse;
                }
                :deep(.el-checkbox__label) {
                    display: flex;
                    padding: 0 10px;
                }
            }
            .noStructureData {
                background-color: #0e2b3d;
                height: 34%;
                width: 90%;
                margin: 5% 5%;
                color: #c5d8ff;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .mainStructure {
                box-sizing: border-box;
                margin: 0 16px;
                text-align: center;
                color: #c5d8ff;
                font-size: 14px;
                overflow-y: scroll;
                height: 128px;
                table {
                    width: 100%;
                    border-collapse: collapse;
                    thead {
                        position: sticky;
                        top: 0;
                        z-index: 2;
                        background: #163c54;
                    }
                    th,
                    tr {
                        height: 32px;
                        padding: 0;
                    }
                    tbody {
                        tr {
                            &:nth-of-type(even) {
                                background: #163c54;
                            }
                        }
                    }
                }
            }
            .estimateTimely {
                width: 100%;
                height: calc(100% - 174px);
            }
        }
        .title {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            line-height: 22px;
            margin: 16px 0 0 16px;
            display: block;
        }
    }
    .liftingStructure {
        height: 285px;
        margin-top: 16px;
        background-color: #0e2b3d;
        .title {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            line-height: 22px;
            margin: 16px 0 0 16px;
            display: inline-block;
        }
        .structured {
            display: flex;
            justify-content: space-evenly;
            .heading {
                display: flex;
                justify-content: center;
                color: #64bdf5;
                .wrong {
                    color: #ff4d4f;
                }
                .iconfont {
                    display: flex;
                    align-items: center;
                }
            }
            .structuredCondition {
                margin: 15px 20px;
                .arrange {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    .arrangeBack {
                        background-color: #163c54;
                        padding: 15px;
                        margin-bottom: 7px;
                        font-size: 14px;
                        color: #ffffff;
                        width: 41%;
                        display: flex;
                        justify-content: space-between;
                        .degree {
                            color: #4ba6dd;
                        }
                        .unStandard {
                            color: red;
                        }
                        .standard {
                            color: #ffc53f;
                        }
                        .excellent {
                            color: #a0d911;
                        }
                    }
                }
                .table-main {
                    box-sizing: border-box;
                    text-align: center;
                    color: #c5d8ff;
                    font-size: 14px;
                    overflow-y: auto;
                    height: 96px;
                    table {
                        width: 100%;
                        height: 100%;
                        border-collapse: collapse;
                        thead {
                            position: sticky;
                            top: 0;
                            z-index: 2;
                            background: #163c54;
                        }

                        th,
                        tr {
                            height: 32px;
                            padding: 0;
                        }
                        tbody {
                            tr {
                                height: 32px;
                                &:nth-of-type(even) {
                                    background: #163c54;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    ::-webkit-scrollbar {
        width: 4px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
        border-radius: 50px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #898989;
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }
}
</style>
